<template>
	<w-dailog
		v-model="dialogVisible"
		width="480px"
		:title="title"
		:showMoreBtn="false"
		:beforeClose="onBeforeClose"
		@close="onRefresh"
	>
		<div class="create-organ" slot-scope="{ fullScreen }">
			<w-scroll-bar :flex="fullScreen">
				<basicInfo
					ref="basicInfo"
					:visibleFlag="dialogVisible"
					:procedureDetails="procedureDetails"
					:bigProcedureSelectList="bigProcedureSelectList"
					:smallProcedureSelectList="smallProcedureSelectList"
					@on-changeBigType="changeBigType"
				></basicInfo>
			</w-scroll-bar>
		</div>
		<template slot="footer">
			<el-button @click="onCancelClick">取消</el-button>
			<el-button type="primary" @click="onSaveClickHandler">保存</el-button>
		</template>
	</w-dailog>
</template>
<script>
import basicInfo from './BasicInfo.vue'
export default {
	name: 'createMaterial',
	components: {
		basicInfo
	},
	data () {
		return {
			title: '',
			dialogVisible: false,
			procedureDetails: {},
			bigProcedureSelectList: [],
			smallProcedureSelectList: [],
			smallTypeCache: [],
			fxDataVerification: this.$fxUtils.fxDataVerification(),
			nextCode: ''
		}
	},
	computed: {
		isAdd () {
			return !this.procedureDetails.id
		}
	},
	methods: {
		async add () {
			await this.getListData()
			this.procedureDetails = {
				id: '',
				code: this.nextCode,
				name: '',
				bigProcedureType: '',
				smallProcedureType: '',
				enable: 1,
				remark: ''
			}
			this.fxDataVerification.resetData(this.procedureDetails)
			this.title = '新增工序'
			this.dialogVisible = true
		},
		async edit (procedureDetails) {
			await this.getProcedureTypeList()
			this.procedureDetails = procedureDetails
			this.fxDataVerification.resetData(this.procedureDetails)
			this.title = '编辑工序'
			this.dialogVisible = true
		},
		async getListData () {
			return Promise.all([this.getNextCode(), this.getProcedureBigType(), this.getProcedureSmallType()]).then(([nextCode, bigType, smallType]) => {
				this.nextCode = nextCode
				this.bigProcedureSelectList = bigType
				this.smallProcedureSelectList = smallType
				this.smallTypeCache = smallType
			})
		},
		async getProcedureTypeList () {
			return Promise.all([this.getProcedureBigType(), this.getProcedureSmallType()]).then(([bigType, smallType]) => {
				this.bigProcedureSelectList = bigType
				this.smallProcedureSelectList = smallType
				this.smallTypeCache = smallType
			})
		},
		getNextCode () {
			return this.$fxApi('procedure.getNextCode')
		},
		getProcedureBigType () {
			return this.$fxApi('procedure.findListTypeAll')({
				query: {
					type: 0
				}
			})
		},
		getProcedureSmallType () {
			return this.$fxApi('procedure.findListTypeAll')({
				query: {
					type: 1
				}
			})
		},
		onRefresh () {
			this.$emit('on-refresh')
		},
		verificationDetails () {
			return this.fxDataVerification.checkComfirm(this.procedureDetails)
		},
		onSaveClickHandler () {
			return this.onValidateFormData().then(this.onSaveOrganHandler)
		},
		onValidateFormData () {
			return new Promise(resolve => {
				this.$refs.basicInfo.validate().then(() => {
					resolve()
				}).catch(() => {
					this.$fxMessage.warning('请填写必填信息')
				})
			})
		},
		onSaveOrganHandler () {
			// const { code, id, name, rate, enable, processingFlag, remark, materialType } = this.procedureDetails
			const postData = {
				...this.procedureDetails
			}
			return this.$fxApi('procedure.saveOrUpdate')({ data: postData }).then(res => {
				this.fxDataVerification.resetData(this.procedureDetails)
				this.dialogVisible = false
				return Promise.resolve(res)
			})
		},
		onCancelClick () {
			this.verificationDetails().then(() => {
				this.onSaveClickHandler().then(() => {
					this.dialogVisible = false
				})
			}).catch(() => {
				this.dialogVisible = false
			})
		},
		onBeforeClose (close) {
			this.verificationDetails().then(() => {
				this.onSaveClickHandler().then(close)
			}).catch(() => {
				this.dialogVisible = false
			})
		},
		changeBigType (bigType) {
			const filterSmall = this.smallTypeCache.filter(type => {
				if (type.parentId === bigType) {
					return type
				}
			})
			this.smallProcedureSelectList = filterSmall
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.create-organ {
	flex: 1
	display: flex;
	flex-direction: column;
	overflow: auto;
}
</style>
